<template>
  <view class="page-container page">
    <view class="login_content  padd94">
      <image class="logo" src="https://www.worldintek.com:39011/yaolexue-service/icon_logo.png" mode=""></image>
      <view class="title_content">
        你好，
        <view class="title_content-text">
          欢迎使用【药乐学】
        </view>
      </view>

      <!-- 登录-->
      <view v-if="loginType === 0">
        <view class="Ipt_container">
          <u-input class="ipt" placeholder="请输入手机号" border="surround" clearable shape="circle" v-model="formData.mobile"
            maxlength="11"></u-input>
          <u-input v-model="formData.verificationCode" class="ipt" placeholder="请输入验证码" shape="circle" maxlength="4">
            <template slot="suffix">
              <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒后重新获取"></u-code>
              <u-text @click="getloginCode" :text="tips"></u-text>
            </template>

          </u-input>
        </view>
        <button class="btn" @click="login">下一步</button>
      </view>
      <!-- 注册-->
      <view v-else>
        <view class="Ipt_container">
          <u-input class="ipt" placeholder="请输入手机号" border="surround" clearable shape="circle" v-model="formData.mobile"
            maxlength="11"></u-input>
          <u-input v-model="formData.verificationCode" class="ipt" placeholder="请输入验证码" shape="circle" maxlength="4">
            <template slot="suffix">
              <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒后重新获取"></u-code>
              <u-text @click="getRegisterCode" :text="tips"></u-text>
            </template>
          </u-input>
        </view>
        <button class="btn" @click="register">注册</button>
      </view>


    </view>
    <view class="bottom_img">
      <image class="img" src="https://www.worldintek.com:39011/yaolexue-service/icon_bg.png" mode=""></image>
    </view>
  </view>
</template>

<script>
let redirect = ''
export default {
  comments: {

  },
  data() {
    return {
      formData: {
        mobile: '',
        verificationCode: ''
      },
      text: '',
      tips: '',
      loginType: 0, //登录页 / 1注册页

    };
  },
  onLoad(query) {
    console.log(query, 1111)
	console.log(getApp().globalData.uid,'===>uid')
    if (query.redirect) {
      redirect = query.redirect
    }
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },

    checkPhone() {
      const mobileRegex = /^1[3456789]\d{9}$/;
      if (this.formData.mobile === '' || !mobileRegex.test(this.formData.mobile)) {
        uni.showToast({
          title: '请输入正确手机号',
          icon: 'none',
        });
        return
      }
      return true
    },
    async getloginCode() {
      if (!this.checkPhone()) return;
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: '正在获取验证码'
        })
        try {
          const res = await this.$http.get(
            `/yaolexue-service-portal/sysPortalUser/getLoginPhoneCaptcha/${this.formData.mobile}`, {}, {
            isNeedLoading: false
          })
          console.log(res, 'res')
          if (res && res.code === 200) {
            uni.$u.toast('验证码已发送');
            this.$refs.uCode.start();
            uni.$u.toast(res.data);

          } else if (res && res.code == 509) {
            uni.$u.toast('短信上限，请稍后再试');
          } else {
            uni.$u.toast(res.message); // 错误提示 //用户未注册
            setTimeout(() => {
              this.loginType = 1;
            }, 2000);
          }

        } catch (e) {
          uni.$u.toast('验证码发送失败');
        } finally {
          uni.hideLoading();
        }
      } else {
        uni.$u.toast('请勿重复发送');
      }
    },
    async login() {
      if (!this.checkPhone()) return
      if (this.formData.verificationCode.trim().length !== 4) {
        return uni.showToast({
          title: '请输入验证码',
          icon: 'none',
        });
      }
      const loginRes = await this.$http.post('/yaolexue-service-portal/sysPortalUser/portalUserLogin', {
        code: this.formData.verificationCode,
        phoneNumber: this.formData.mobile
      }, {
        isNeedLoading: true
      })
      // console.log('loginRes', loginRes);
      if (loginRes.code === 200) {
        if (loginRes.data) {
          uni.setStorageSync('token', loginRes.data)
          if (redirect) {
            uni.reLaunch({
              url: redirect
            })
          } else {
            uni.switchTab({
              url: '/pages/home/home'
            })
          }

        }
      } else {
        if (loginRes.code === 409) {
          // this.loginType = 1;
			
			
            uni.navigateTo({
              url: "/subPages/selectRol/selectRol?phone=" + this.formData.mobile
            })
        } else {
          uni.showToast({
            title: loginRes.message,
            icon: 'none',
          });
        }
      }
    },
    async getRegisterCode() {
      if (!this.checkPhone()) return
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: '正在获取验证码'
        })
        try {
          const res = await this.$http.get(
            `/yaolexue-service-portal/sysPortalUser/getRegisterPhoneCaptcha/${this.formData.mobile}`, {}, {
            isNeedLoading: false
          })

          if (res && res.code === 200) {
            uni.$u.toast('验证码已发送');
            this.$refs.uCode.start();
          } else {
            uni.$u.toast(res.message)
          }
        } catch (e) {
          uni.$u.toast('验证码发送失败');
        } finally {
          uni.hideLoading();
        }

      } else {
        uni.$u.toast('请勿重复发送');
      }
    },
    async register() {

      if (!this.checkPhone()) return


      if (this.formData.verificationCode.trim().length !== 4) {
        return uni.showToast({
          title: '请输入验证码',
          icon: 'none',
        });
      }

      const checkCode = await this.$http.post('/yaolexue-service-portal/sysPortalUser/registerVerifyPhoneCaptcha', {
        code: this.formData.verificationCode,
        phoneNumber: this.formData.mobile
      }, {
        isNeedLoading: false
      })
      console.log('checkCode', checkCode);
      if (checkCode.code !== 200) {
        uni.showToast({
          title: '验证码错误',
          icon: 'error'
        })
      } else {

        uni.navigateTo({
          url: "/subPages/selectRol/selectRol?phone=" + this.formData.mobile
        })
      }
    },
  }
}
</script>

<style lang="scss">
.page-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login_content {


  .logo {
    width: 176rpx;
    height: 176rpx;
    transform: translate(90%, 0);
    margin-top: 69rpx;
  }

  .title_content {
    margin-top: 76rpx;
    font-size: 48rpx;
    font-family: SimSun;
    font-weight: bold;
    color: #333333;
    text-align: left;

    .title_content-text {
      margin: 50rpx 0 32rpx 0;
    }

    .xText {
      font-size: 28rpx;
      font-family: PingFang;
      font-weight: 500;
      color: #666666;
      line-height: 31rpx;
    }
  }

  .Ipt_container {
    width: 561rpx;
    margin-top: 194rpx;

    .ipt {
      background: #E1E1E1;
      opacity: 0.8;

      box-sizing: border-box;
    }

    ::v-deep .u-text__value {
      color: #FF0807 !important;
      padding-right: 48rpx;
    }

    .u-input {

      height: 90rpx;
      background: #E1E1E1;
      margin-bottom: 30rpx;
      opacity: 0.8;
      padding: 0 0 0 9rpx !important;

      ::v-deep .u-input__content {
        margin-left: 20rpx !important;

        .u-input__content__clear {
          width: 24rpx;
          height: 24rpx;
          margin-right: 10rpx;
        }
      }
    }

    ::v-deep .uni-input-placeholder {
      font-size: 28rpx;
      font-weight: 500;
      color: #666666 !important;
    }


  }


  .btn {
    width: 561rpx;
    height: 86rpx;
    line-height: 86rpx;
    background: #FA312A !important;
    border-radius: 43rpx !important;
    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    margin-top: 92rpx;

  }

  .text_link {
    font-size: 28rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #666666;
    line-height: 31rpx;
    text-align: center;


  }
}

.bottom_img {
  margin-top: 69rpx;
  width: 749rpx;
  height: 332rpx;
  overflow: hidden;

  .img {
    width: 100%;
    height: 332rpx;
  }
}
</style>